
window.a_1_2_1_1_1_line_dct={};
window.a_1_2_1_1_1_line_add=function(obj){
let father_dom=obj.father_dom||obj._this.$refs[obj.father_ref];
//新建一个dom
let new_dom=document.createElement('a_1_2_1_1_1_line');
//设置dom属性 ref值为ref_obj
new_dom.setAttribute('ref','ref_obj');
//设置vue
let vue_dct={'el':new_dom,data:{true:true,false:false,null:null}};
//设置vue传入参数
new_dom.setAttribute(':deepcopy_data',"deepcopy_data");vue_dct.data.deepcopy_data={xy:JSON.stringify(obj.xy)};
//插入dom
father_dom.appendChild(new_dom);  
//渲染vue组件
let new_vue=new Vue(vue_dct);
//获取到刚才渲染的vue对象
let new_vue2=new_vue.$refs.ref_obj;
//加入快速访问中
if(obj.key){window.a_1_2_1_1_1_line_dct[obj.key]={'dom':new_dom,"vue":new_vue2,'father_dom':father_dom}}

}

window.a_1_2_1_1_1_line_del=function(key){
window.a_1_2_1_1_1_line_dct[key].father_dom.removeChild(window.a_1_2_1_1_1_line_dct[key].vue.$el);
delete window.a_1_2_1_1_1_line_dct[key];
}
Vue.component2('a_1_2_1_1_1_line', {  
    template: `
       
   <div :refresh="refresh">

        <svg v-if='data.line1_flag' :style="data.line1"
            class="a_1_2_1_1_1_b2" stroke-width="6">
                <path :d="data.line1_d" 
                    stroke="#0096f2"fill="#0096f2" stroke-width="6">
                </path>
        </svg>
        
        <svg v-if='data.line2_flag':style="data.line2"
            class="a_1_2_1_1_1_b2" stroke-width="6">
                <path :d="data.line2_d" 
                    stroke="#0096f2"fill="#0096f2" stroke-width="6">
                </path>
        </svg>
        
        <svg v-if='data.line3_flag' :style="data.line3"  
            class="a_1_2_1_1_1_b2" stroke-width="6">
                <path :d="data.line3_d" 
                    stroke="#0096f2"fill="#0096f2" stroke-width="6">
                </path>
        </svg>
        
        <svg v-if='data.line4_flag' :style="data.line4"
            class="a_1_2_1_1_1_b2" stroke-width="6">
                <path :d="data.line4_d" 
                    stroke="#0096f2"fill="#0096f2" stroke-width="6">
                </path>
        </svg>
        
        <svg v-if='data.line5_flag' :style="data.line5"
            class="a_1_2_1_1_1_b2" stroke-width="6">
                <path :d="data.line5_d" 
                    stroke="#0096f2"fill="#0096f2" stroke-width="6">
                </path>
        </svg>
    </div>
`,
data(){
    return{
        show_flag:true,
        refresh:'1',
        lefttop:'color:red',
        data:{
            xy:'',
            line1_flag:true,
            line2_flag:false,
            line3_flag:false,
            line4_flag:false,
            line5_flag:false,
            line1:'',
            line2:'',
            line3:'',
            line4:'',
            line5:'',
            line1_d:'',
            line2_d:'',
            line3_d:'',
            line4_d:'',
            line5_d:'',
        }
    }
},
watch:{
    'data.xy':function(e){
        e=JSON.parse(e);
        this.set_line2(e);
    },
},
methods:{
    set_line:function(dct){
      let x_offset=Math.abs(dct.x1-dct.x2);
      //如果end在start正下方
      if (x_offset<5 && dct.y2>dct.y1){return 0}
      //如果end在start左下方
      else if(dct.x1>=dct.x2 && dct.y2>dct.y1){return 1}
      //如果end在start右下方
      else if(dct.x1<=dct.x2 && dct.y2>dct.y1){return 2}
      //如果end在start上方
      else if(x_offset<5 && dct.y2<=dct.y1){return 3}
      //如果end在start左上方
      else if(dct.x1>=dct.x2 && dct.y2<=dct.y1){return 4}
      //如果end在start右上方
      else if(dct.x1<=dct.x2&& dct.y2<=dct.y1){return 5}
      else if((dct.x1==dct.x2) &&(dct.y1==dct.y2)){return 0}
    },
    
    set_line2:function(dct){
        let x1=dct.x1,y1=dct.y1,x2=dct.x2,y2=dct.y2;
        let k=this.set_line(dct);
        //如果end在start正下方
        if       (k==0){
            this.data.line1=`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${y2-y1+5}px;width:${3}px;`;
            this.data.line1_d="M 0 0 L 0 "+(y2-y1)+" ";
            this.data.line2_flag=false;
            this.data.line3_flag=false;
            this.data.line4_flag=false;
            this.data.line5_flag=false;
            this.data.refresh();
        //如果end在start左下方
        }else if(k==1){
            this.data.line1=`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${(y2-y1)/2+5}px;width:${3}px;`;
            // this.data.line2=`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x1-x2+33}px;cursor:s-resize;`;
            this.data.line2=`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x1-x2+33}px;`;
            this.data.line3=`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${(y2-y1)/2+5}px;width:${3}px;`;
            this.data.line1_d="M 0 0 L 0 "+((y2-y1)/2+2)+" ";
            this.data.line2_d=`M 0 0 L ${x1-x2+3} 0`;
            this.data.line3_d="M 0 0 L 0 "+((y2-y1)/2+7)+" ";
            this.data.line2_flag=true;
            this.data.line3_flag=true;
            this.data.line4_flag=false;
            this.data.line5_flag=false;
            this.data.refresh();
        //如果end在start右下方
        }else if(k==2){
            this.data.line1=`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${(y2-y1)/2+5}px;width:${3}px;`;
            // this.data.line2=`left: ${x1+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x2-x1+5}px;cursor:s-resize;`;
            this.data.line2=`left: ${x1+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${3}px;width:${x2-x1+5}px;`;
            this.data.line3=`left: ${x2+4.5}px;top:${y1+(y2-y1)/2+5}px;height: ${(y2-y1)/2+5}px;width:${3}px;`;
            this.data.line1_d="M 0 0 L 0 "+((y2-y1)/2+2)+" ";
            this.data.line2_d=`M 0 0 L ${x2-x1+3} 0`;
            this.data.line3_d="M 0 0 L 0 "+((y2-y1)/2+7)+" ";
            this.data.line2_flag=true;
            this.data.line3_flag=true;
            this.data.line4_flag=false;
            this.data.line5_flag=false;
            this.data.refresh();
        //如果end在start上方
        }else if(k==3){
            this.data.line1=`left: ${x1+4.5}px;top:${y2-35}px;height: ${(y1-y2)+10+70}px;width:${3}px;`;
            this.data.line1_d=`M 0 0 L 0 ${y1-y2+70}`;
            this.data.line2_flag=false;
            this.data.line3_flag=false;
            this.data.line4_flag=false;
            this.data.line5_flag=false;
            this.data.refresh();
        //如果end在start左上方
        }else if(k==4){
            this.data.line1=`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${37}px;width:${3}px;`;
            this.data.line2=`left: ${x1-(x1-x2)/2+4.5}px;top:${y1+35}px;height: ${3}px;width:${(x1-x2)/2+7}px;`;
            // this.data.line3=`left: ${x1-(x1-x2)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;cursor:w-resize;`;
            this.data.line3=`left: ${x1-(x1-x2)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;`;
            this.data.line4=`left: ${x2+4.5}px;top:${y2-35}px;height: ${3}px;width:${(x1-x2)/2+7}px;`;
            this.data.line5=`left: ${x2+4.5}px;top:${y2-35}px;height: ${55}px;width:${3}px;`;
            this.data.line1_d="M 0 0 L 0 32";
            this.data.line2_d=`M 0 0 L ${(x1-x2)/2+3} 0`;
            this.data.line3_d=`M 0 0 L 0 ${y1-y2+77}`;
            this.data.line4_d=`M 0 0 L ${(x1-x2)/2+3} 0`;
            this.data.line5_d="M 0 0 L 0 44";
            this.data.line2_flag=true;
            this.data.line3_flag=true;
            this.data.line4_flag=true;
            this.data.line5_flag=true;
            this.data.refresh();
        //如果end在start右上方
        }else if(k==5){
            this.data.line1=`left: ${x1+4.5}px;top:${y1+1+4}px;height: ${37}px;width:${3}px;`;
            this.data.line2=`left: ${x1+4.5}px;top:${y1+35}px;height: ${3}px;width:${(x2-x1)/2+7}px;`;
            // this.data.line3=`left: ${x1+(x2-x1)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;cursor:w-resize;`;
            this.data.line3=`left: ${x1+(x2-x1)/2+4.5}px;top:${y2-35}px;height: ${70+y1-y2}px;width:${10}px;`;
            this.data.line4=`left: ${x1+(x2-x1)/2+4.5}px;top:${y2-35}px;height: ${3}px;width:${(x2-x1)/2+7}px;`;
            this.data.line5=`left: ${x2+4.5}px;top:${y2-35}px;height: ${55}px;width:${3}px;`;
            this.data.line1_d="M 0 0 L 0 32";
            this.data.line2_d=`M 0 0 L ${(x2-x1)/2+3} 0`;
            this.data.line3_d=`M 0 0 L 0 ${y1-y2+77}`;
            this.data.line4_d=`M 0 0 L ${(x2-x1)/2+3} 0`;
            this.data.line5_d="M 0 0 L 0 44";
            this.data.line2_flag=true;
            this.data.line3_flag=true;
            this.data.line4_flag=true;
            this.data.line5_flag=true;
            this.data.refresh();
        }
    },
},

mounted:function(){
_this.data.refresh=function(){_this.refresh='2'?'1':'2'}
_this.data.menu_dct=_this.deepcopy_data.menu_dct;_this.data.refresh();
}

})